<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.children">
                    <el-submenu :index="item.index+''" :key="item.index+''">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.children">
                            <el-submenu v-if="subItem.children" :index="subItem.index+''" :key="subItem.index+''">
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.index+''">
                                    {{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index+''" :key="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index+''">
                        <i :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import { computed, onMounted, reactive } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { map } from "lodash";
export default {
    setup() {
        const route = useRoute();
        const store = useStore();

        // const adminItems =  [
        //     {
        //         icon: "el-icon-lx-home",
        //         index: "/dashboard",
        //         title: "系统首页",
        //     },
        //     {
        //         icon: "el-icon-lx-message",
        //         index: "/annoucement",
        //         title: "公告",
        //     },
        //     {
        //         icon: "el-icon-lx-tagfill",
        //         index: "/competitionManage",
        //         title: "赛事管理",
        //         subs:[
        //             {
        //                 index:"/competitionCreate",
        //                 title:"创建赛事",
        //             },
        //             {
        //                 index:"/competitionEdit",
        //                 title:"赛事编辑",
        //             },
        //         ]
        //     },
        //     {
        //         icon:"el-icon-lx-edit",
        //         title:"报名管理",
        //         subs:[
        //             {
        //                 index:"/enroll",
        //                 title:"参赛报名"
        //             },
        //             {
        //                 index:"/enrollManage",
        //                 title:"报名处理"
        //             },
        //         ]
        //     },
        //     {
        //         icon:"el-icon-lx-service",
        //         index:"/algorithm",
        //         title:"编排管理",
        //     },
        //     {
        //         icon: "el-icon-lx-cascades",
        //         index: "/scheduleManage",
        //         title: "赛程管理",
        //         subs:[
        //             {
        //                 index: "/schedule",
        //                 title: "赛程",
        //             },
        //             {
        //                 index:"/scoreManage",
        //                 title:"成绩管理"
        //             }
        //         ]
        //     },
            
        //     {
        //         icon:"el-icon-lx-file",
        //         index:"/rulesManage",
        //         title:"秩序册管理",
        //     },
        //     {
        //         icon: "el-icon-lx-warn",
        //         title: "权限管理",
        //         index:'8',
        //         subs: [
        //             {
        //                 index: "/userManage",
        //                 title: "用户管理",
        //             },
        //             {
        //                 index: "/permissionRequest",
        //                 title: "裁判管理",
        //             },
        //             {
        //                 index: "/menuManage",
        //                 title: "菜单管理",
        //             }
        //         ],
        //     },
        // ];
        // const items = computed(() => {
            
        //     let role = store.state.identity;
        //     if (role === "ROLE_administrators") {
        //         return adminItems;
        //     } else if (role === "ROLE_referee") {
        //         return judgeItems;
        //     } else {
        //         return publicItems;
        //     }
        // });
        const items = reactive([
            {
                icon: "el-icon-lx-home",
                index: "/dashboard",
                title: "系统首页",
            },
                {
                icon: "el-icon-lx-message",
                index: "/annoucement",
                title: "公告",
            },
        ]);

        const onRoutes = computed(() => {
            return route.path;
        });

        const collapse = computed(() => store.state.collapse);
        
        onMounted(()=>{
            // let items = reactive([]);
            store.dispatch("GetMyMenu").then(res=>{
                // console.log("####### menu result",res)
                
                items.splice(2,items.length,...map(res,item=>{
                    return {
                        icon: item.iconCls,
                        index: item.path,
                        title: item.name,
                        children:map(item.children,each=>{
                            return {
                                index: each.path,
                                title: each.name
                            }
                        })
                    }
                }))
                // console.log("@@my menu",items)
            })

        })
        return {
            items,
            onRoutes,
            collapse,
        };
    },
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
</style>
